<template>
    <div class="nohover">
        <el-table align="center" :key="valkey" :highlight-current-row="false" :data="curriculum" border style="width: 100%"
            :span-method="objectSpanMethod" :row-style="{ 'height': '100px' }">
            <el-table-column label="星期" align="center">
                <el-table-column label="课程" align="center">
                    <el-table-column label="课次" align="center" width="90">
                        <template slot-scope="scope">
                            <div v-if="scope.$index == 4">
                                午休
                            </div>
                            <div v-else-if="scope.$index == 9">
                                放学
                            </div>
                            <div v-else-if="scope.$index < 4">
                                第 {{ scope.$index + 1 }} 节
                            </div>
                            <div v-else-if="scope.$index > 8">
                                第 {{ scope.$index - 1 }} 节
                            </div>
                            <div v-else>
                                第 {{ scope.$index }} 节
                            </div>

                        </template>
                    </el-table-column>
                </el-table-column>

            </el-table-column>
            <el-table-column align="center" prop="MON" label="星期一">
                <template scope="scope">
                    <div v-if="scope.row.MON">
                        <div>{{ scope.row.MON.courseName }}</div>
                        <div>{{ scope.row.MON.teacherName }}</div>
                        <div>{{ scope.row.MON.room }}</div>
                        <div v-if="scope.row.MON.weekNumber">
                            <span>周次:</span>
                            {{ scope.row.MON.weekNumber }}
                        </div>
                        <div>
                            <el-button type="primary" icon="el-icon-edit" size="mini" round @click="updateCourse(scope.row.MON)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" round @click="deleteCourse(scope.row.MON.id)"></el-button>

                        </div>

                    </div>
                    <div v-else style="100%" >
                        <el-button type="success" icon="el-icon-plus" size="mini" round @click="addScorse(scope)"></el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="TUE" label="星期二">
                <template scope="scope">
                    <div v-if="scope.row.TUE">
                        <div>{{ scope.row.TUE.courseName }}</div>
                        <div>{{ scope.row.TUE.teacherName }}</div>
                        <div>{{ scope.row.TUE.room }}</div>
                        <div v-if="scope.row.TUE.weekNumber">
                            <span>周次:</span>
                            {{ scope.row.TUE.weekNumber }}
                        </div>
                        <div>
                            <el-button type="primary" icon="el-icon-edit" size="mini" round @click="updateCourse(scope.row.TUE)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" round @click="deleteCourse(scope.row.TUE.id)"></el-button>
                        </div>
                    </div>
                    <div v-else style="100%" >
                        <el-button type="success" icon="el-icon-plus" size="mini" round @click="addScorse(scope)"></el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="WED" label="星期三">
                <template scope="scope">
                    <div v-if="scope.row.WED">
                        <div>{{ scope.row.WED.courseName }}</div>
                        <div>{{ scope.row.WED.teacherName }}</div>
                        <div>{{ scope.row.WED.room }}</div>
                        <div v-if="scope.row.WED.weekNumber">
                            <span>周次:</span>
                            {{ scope.row.WED.weekNumber }}
                        </div>
                        <div>
                            <el-button type="primary" icon="el-icon-edit" size="mini" round @click="updateCourse(scope.row.WED)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" round @click="deleteCourse(scope.row.WED.id)"></el-button>
                        </div>
                    </div>
                    <div v-else style="100%" >
                        <el-button type="success" icon="el-icon-plus" size="mini" round @click="addScorse(scope)"></el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="THU" label="星期四">
                <template scope="scope">
                    <div v-if="scope.row.THU">
                        <div>{{ scope.row.THU.courseName }}</div>
                        <div>{{ scope.row.THU.teacherName }}</div>
                        <div>{{ scope.row.THU.room }}</div>
                        <div v-if="scope.row.THU.weekNumber">
                            <span>周次:</span>
                            {{ scope.row.THU.weekNumber }}
                        </div>
                        <div>
                            <el-button type="primary" icon="el-icon-edit" size="mini" round @click="updateCourse(scope.row.THU)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" round @click="deleteCourse(scope.row.THU.id)"></el-button>
                        </div>
                    </div>
                    <div v-else style="100%" >
                        <el-button type="success" icon="el-icon-plus" size="mini" round @click="addScorse(scope)"></el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="FRI" label="星期五">
                <template scope="scope">
                   
                    <div v-if="scope.row.FRI">
                        <div>{{ scope.row.FRI.courseName }}</div>
                        <div>{{ scope.row.FRI.teacherName }}</div>
                        <div>{{ scope.row.FRI.room }}</div>
                        <div v-if="scope.row.FRI.weekNumber">
                            <span>周次:</span>
                            {{ scope.row.FRI.weekNumber }}
                        </div>
                        <div>
                            <el-button type="primary" icon="el-icon-edit" size="mini" round @click="updateCourse(scope.row.FRI)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" round @click="deleteCourse(scope.row.FRI.id)"></el-button>
                        </div>
                    </div>
                    <div v-else style="100%" >
                        <el-button type="success" icon="el-icon-plus" size="mini" round @click="addScorse(scope)"></el-button>
                    </div>
                </template>
            </el-table-column>

            <el-table-column align="center" prop="SAT" label="星期六">
                <template scope="scope">
                    <div v-if="scope.row.SAT">
                        <div>{{ scope.row.SAT.courseName }}</div>
                        <div>{{ scope.row.SAT.teacherName }}</div>
                        <div>{{ scope.row.SAT.room }}</div>
                        <div v-if="scope.row.SAT.weekNumber">
                            <span>周次:</span>
                            {{ scope.row.SAT.weekNumber }}
                        </div>
                        <div>
                            <el-button type="primary" icon="el-icon-edit" size="mini" round @click="updateCourse(scope.row.SAT)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" round @click="deleteCourse(scope.row.SAT.id)"></el-button>
                        </div>
                    </div>
                    <div v-else style="100%" >
                        <el-button type="success" icon="el-icon-plus" size="mini" round @click="addScorse(scope)"></el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="SUN" label="星期日">
                <template scope="scope">
                    <div v-if="scope.row.SUN">
                        <div>{{ scope.row.SUN.courseName }}</div>
                        <div>{{ scope.row.SUN.teacherName }}</div>
                        <div>{{ scope.row.SUN.room }}</div>
                        <div v-if="scope.row.SUN.weekNumber">
                            <span>周次:</span>
                            {{ scope.row.SUN.weekNumber }}
                        </div>
                        <div>
                            <el-button type="primary" icon="el-icon-edit" size="mini" round @click="updateCourse(scope.row.SUN)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" round @click="deleteCourse(scope.row.SUN.id)"></el-button>
                        </div>
                    </div>
                    <div v-else style="100%" >
                        <el-button type="success" icon="el-icon-plus" size="mini" round @click="addScorse(scope)"></el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        
        <add-update v-if="addOrUpdateVisible" ref="addUpdate" @refreshDataList="getData"></add-update>
    </div>
</template>

<script>
import { curriculumApi } from '@/api/course';
import { clone } from '@/utils';
import addUpdate from './add-update'
//MON 、星期二 TUE 、星期三 WED 、星期四 THU 、星期五 FRI 、星期六 SAT 、星期天 SUN。
export default {
    components: {
        addUpdate
    },
    props: {},
    data() {
        return {
            valkey:1,
            addOrUpdateVisible:false,
            curriculum: [],
            course: {
                "id": null,
                "courseId": null,
                "courseName": null,
                "week": null,
                "teacherId": null,
                "teacherName": null,
                "weekNumber": null,
                "classId": null,
                "type": 'class',
                "classTimes": null,
                "classYear": null,
                "roomId": null,
                "room": null,
            }
            

        };
    },
    watch: {},
    computed: {},
    methods: {
        init(cid) {
            //TODO 获取设置班级
            this.course.classId = cid;
            this.getData()
        },
        submit(){
            let data=[]
            
            let c;
            for(c of this.curriculum){

                let i;
                for(i in c){
                    data.push(c[i])
                }
                
            }
        },
        updateCourse(data){
            this.addOrUpdateVisible=true
            this.$nextTick(() => {
                this.$refs.addUpdate.init(data)
            })
        },
        deleteCourse(id){
            this.$confirm(`确定对[${id}]进行删除操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                curriculumApi.deleteCourse(id)
                .then(()=>{
                    this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false
                        this.getData()
                    }
                    })
                })
            })
            
        },
        addScorse(info){
            let course= this.course
            course.week = info.column.label
            let i = info.$index;
            if(i<4){
                course.classTimes = i+1
            }else if(i>4 && i<9){
                course.classTimes = i
            }else if(i>9 && i<12){
                course.classTimes = i-1
            }
            
            // this.curriculum[info.$index][info.column.property] = course
            // this.valkey=Math.random()
                
            
            this.addOrUpdateVisible=true
            this.$nextTick(() => {
                this.$refs.addUpdate.init(course)
            })
            
            
            
        },
        getData() {
            this.addOrUpdateVisible = false
            this.valkey=Math.random()
            curriculumApi.getcurriculum(this.course).then(({ data }) => {
                data.splice(8,0,{})
                data.splice(4,0,{})

                this.curriculum = data;
            })
            
            // curriculumApi.getusercurriculum({}).then(({ data }) => {
            //     data.splice(8, 0, {})
            //     data.splice(4, 0, {})

            //     this.curriculum = data;
            // })
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (rowIndex == 4 || rowIndex == 9) {
                return {
                    rowspan: 1, //合并数量
                    colspan: 8
                }
            }
            return {
                rowspan: 1, //合并数量
                colspan: 1
            }




        },
        isSameCourse(target, compare, weekday, sum) {
            if (this.curriculum[target][weekday] && this.curriculum[compare][weekday] && compare >= 0) {
                if (this.curriculum[target][weekday].courseName && this.curriculum[target][weekday].courseName == this.curriculum[compare][weekday].courseName) {

                    sum = this.isSameCourse(target, compare + 1, weekday, sum + 1)

                }
            }

            return sum;
        }
    },
    created() { },
    mounted() {

    }
};
</script>

<style lang="scss">

.nohover{
    .el-table th {
        overflow: initial;
    }
    .el-table thead {
        tr:hover>td { 
            background: unset!important
       }
        tr:first-of-type th:first-of-type,
        tr:nth-of-type(2) th:first-of-type {
            border-bottom: none;
        }
        tr:first-of-type th:first-of-type,
        thead tr:nth-of-type(2) th:first-of-type {
            border-bottom: none;
        }

        tr:first-of-type th:first-of-type .cell {
            text-align: right;
        }

        tr:nth-of-type(2) th:first-of-type .cell {
            padding-left: 0;
        }

        tr:last-of-type th:first-of-type .cell {
            text-align: left;
        }

        tr:first-of-type th:first-of-type:before,
        tr:last-of-type th:first-of-type:before {
            content: '';
            position: absolute;
            width: 1px;
            background-color: #666;
            display: block;
        }

        tr:first-of-type th:first-of-type:before {
            height: 198px; //根据情况调整
            top: 0;
            left: 38px; //根据情况调整
            transform: rotate(-20deg); //根据情况调整
            transform-origin: top;
            z-index: 2;
        }

        tr:last-of-type th:first-of-type:before {
            height: 198px; //根据情况调整
            bottom: 0;
            right: 0; //根据情况调整
            transform: rotate(-50deg); //根据情况调整
            transform-origin: bottom;

        }

    }
}



// .el-table__row:hover ,.hover-row>td{
//     background-color: unset !important;
// }
</style>

<style lang="scss" scoped>

</style>